<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>去哪儿吃</title>
    <!-- Element Plus样式表 -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-plus/2.2.11/index.min.css">
    <!-- 应用程序样式表 -->
    <link rel="stylesheet" href="app.css">
</head>
<body>
    <!-- 应用程序 -->
    <div id="app">
        <!-- 设置页面 -->
        <el-container v-if="page === 'setting'" class="page-setting">
            <!-- 页头 -->
            <el-header class="app-header">
                选项设置

                <!-- 菜单按钮 -->
                <span class="button-menu" @click="switchToMainPage">
                    <el-icon class="icon">
                        <icon-close/>
                    </el-icon>
                </span>
            </el-header>

            <!-- 主体 -->
            <el-main>
                <!-- 选项列表 -->
                <table v-if="options.length > 0" class="options">
                    <thead>
                        <tr>
                            <th>去哪儿</th>
                            <th>权重</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="option in options">
                            <td>
                                <el-input v-model="option.name" clearable/>
                            </td>
                            <td>
                                <el-input-number v-model="option.weight" min="1"/>
                            </td>
                            <td>
                                <span class="button-delete" @click="deleteOption(option.id)">
                                    <el-icon color="#F56C6C">
                                        <icon-delete/>
                                    </el-icon>
                                </span>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <el-empty v-else description="暂无选项，请点击下方按钮添加"></el-empty>

                <!-- 添加按钮 -->
                <el-button class="button-add" @click="createOption">
                    <el-icon>
                        <icon-add/>
                    </el-icon>
                </el-button>
            </el-main>
        </el-container>

        <!-- 主页面 -->
        <el-container v-else class="page-main">
            <!-- 页头 -->
            <el-header class="app-header">
                去哪儿吃

                <!-- 菜单按钮 -->
                <span class="button-menu" @click="switchToSettingPage">
                    <el-icon class="icon">
                        <icon-setting/>
                    </el-icon>
                </span>
            </el-header>

            <!-- 主体 -->
            <el-main>
                <!-- 结果显示 -->
                <div class="result">
                    <!-- 无选项时 -->
                    <div v-if="options.length <= 0" class="text-tip">
                        请先在设置中添加选项
                    </div>
                    <!-- 已选择时 -->
                    <template v-else-if="chosenOption">
                        <!-- 提示标题 -->
                        <div v-if="isChoosing">正在选择…</div>
                        <div v-else>决定了，今天去吃</div>
                        <!-- 选项名称 -->
                        <div class="text-large">{{ chosenOption.name }}</div>
                    </template>
                    <div v-else class="text-tip">
                        请点击“开始”按钮开始选择
                    </div>
                </div>

                <!-- 主按钮 -->
                <div class="main-button">
                    <el-button v-if="options.length <= 0" type="info" disabled>开始！</el-button>
                    <el-button v-else-if="!isChoosing" type="primary" @click="startChoose">开始！</el-button>
                    <el-button v-else type="danger" @click="stopChoose">停止！</el-button>
                </div>
            </el-main>
        </el-container>
    </div>

    <!-- Vue 3 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.37/vue.global.min.js"></script>
    <!-- Element Plus -->
    <script src="https://cdn.bootcdn.net/ajax/libs/element-plus/2.2.11/index.full.min.js"></script>
    <!-- Element Plus Icons -->
    <script src="https://unpkg.com/@element-plus/icons-vue@2.0.6/dist/index.iife.min.js"></script>
    <!-- 应用程序 -->
    <script src="app.js"></script>
</body>
</html>
